<template>
  <!-- 操作日志 -->
  <div class="addressReturn">
    <el-table :data="tableData" border stripe>
      <el-table-column prop="cdate" label="操作时间"></el-table-column>
      <el-table-column prop="login_name" label="操作人"></el-table-column>
      <el-table-column prop="ip" label="操作IP"></el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-popover placement="left" width="200" trigger="hover">
            <logCard :row="scope.row"></logCard>
            <el-button slot="reference" type="text" size="small">查看明细</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      small
      layout="prev, pager, next"
      :total="total_num"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>

<script>
import logCard from "@/components/logCard";
import gci from "@/env/config";

export default {
  components: {
    logCard,
  },
  data() {
    return {
      showAddressReturn: true,
      editAddrFormData: {
        id: "c901293021",
        name: "胖哥两",
        detailAddr: "杭州市西湖区环城北路100号",
        oldAddr: "杭州大厦a座1层101室",
        supplementAddr: "",
      },
      tableData: [],
      keyword: "",
      total_num: 0,
      currentPage: 1,

    };
  },
  methods: {
    pageChange(e){
      this.currentPage = e
      this.getList()
    },
    async getList(){
      const res = await this.axios.post(this.apis.operationLogQuery, {
        page: this.currentPage,
        limit: 10,
      });
      if (res.retCode === 2000) {
        this.tableData = res.rows.items.map(item => ({
          ...item,
          content: gci.DATA_INTERFACE_LOCAL ? item.content : JSON.parse(item.content)
        }));
        this.total_num = res.rows.total_num
      }
    }
  },
  async mounted() {
    this.getList()
  },
};
</script>

<style lang="less">
.addressReturn .el-table__header-wrapper .el-table__cell {
  padding: 5px 0;
  font-size: 12px;
}
.addressReturn .el-table__body-wrapper .el-table__cell {
  padding: 5px 0;
  font-size: 10px;
}

.addressReturn th.el-table__cell {
  background-color: rgba(245, 247, 250, 1);
}
.addressReturn .el-table__cell .cell {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.addressReturn {
  height: 100%;
  position: relative;
  .pagination {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
    .el-pager li.active {
      background-color: #409eff;
      border-radius: 3px;
      color: #fff;
    }
    .el-pagination .btn-prev,
    .el-pagination .btn-next {
      padding: 0 4px !important;
    }
}
</style>
